<script lang="ts" setup>
import { provide, ref } from 'vue'

const emits = defineEmits<{
  (e: 'outside'): void
}>()

const isClickInside = ref(false)

provide('isClickInside', isClickInside)

function onclick() {
  if (isClickInside.value === false) {
    emits('outside')
  } else {
    isClickInside.value = false
  }
}
</script>
<template>
  <div class="OnClickOutside" @click.capture="onclick">
    <slot></slot>
  </div>
</template>

<style lang="scss">
.OnClickOutside {
  min-height: 100vh;
}
</style>
